<template>
    <div class="app-container background" style="padding: 0;">
        <div class="top-title-background">
            <i class="el-icon-back"
                style="color: #ffffff;width:5%;height: 40px;display: inline-block;font-size: 20px;line-height: 40px;padding-left: 20px;cursor: pointer;"
                @click="goBack"></i>
            <span
                style="display: inline-block;width: 85%;text-align: center;color: #ffffff;font-size: 18px;font-weight: bold;line-height: 40px;">{{
                deviceName }}</span>
            <el-button class="button" type="primary" style="position: absolute;right: 20px;top:8px"
                @click="save">保存</el-button>
        </div>
        <el-row :gutter="40" style="padding:20px 60px 20px 20px;margin: 0;">
            <el-col :span="8" v-for="(sensor, index) in sensors" :key="sensor.id" style="margin-bottom: 40px;">
                <el-card class="card">
                    <div slot="header" style="padding: 20px 0 0px;">
                        <span style="letter-spacing: 2px;">{{ sensor.sensorName }}</span>
                        <el-switch v-model="sensor.state" @change="switchChange(sensor)" :active-value="1"
                            :inacitive-value="0" style="float: right;width: 80px;" class="switchStyle" active-text="已开启"
                            inactive-text="已关闭">
                        </el-switch>
                    </div>
                    <div>
                        <el-checkbox-group v-model="sensor.checked" @change="checkedChange(sensor)"
                            style="line-height: 40px;letter-spacing: 1px;">
                            <el-checkbox v-for="item in sensor.options" :key="item.key" :label="item"
                                style="font-weight: bold;">
                                {{ item.value }}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { listDevice_sensor, updateDevice_sensorList } from "@/api/oil/device_sensor"
import { getDevice } from "@/api/oil/device";
export default {
    name: "EditVariable",
    data() {
        return {
            deviceName: '',
            sensors: [],
        }
    },
    created() {
        const deviceId = this.$route.params && this.$route.params.deviceId;
        if (deviceId) {
            getDevice(deviceId).then((response) => {
                this.deviceName = response.data.name;
            })
            listDevice_sensor({ 'deviceId': deviceId }).then((response) => {
                var sensors = response.rows;
                for (let i = 0; i < sensors.length; i++) {
                    var variableKeys = sensors[i].variableKeys!=null&&sensors[i].variableKeys.length>0 ? sensors[i].variableKeys.split(',') : [];
                    var sensorKeys = sensors[i].sensorKeys!=null&&sensors[i].sensorKeys.length>0 ? sensors[i].sensorKeys.split(',') :[];
                    var sensorKeyNames = sensors[i].sensorKeyNames!=null&&sensors[i].sensorKeyNames.length>0 ? sensors[i].sensorKeyNames.split(',') :[];
                    var options = sensorKeys.map((key, index) => {
                        const value = sensorKeyNames[index];
                        return { key, value };
                    })
                    var checked = variableKeys
                        .map(key => options.find(option => option.key === key))
                        .filter(option => option !== undefined);
                    sensors[i].options = options;
                    sensors[i].checked = checked;
                }
                this.sensors = sensors;
                console.log(this.sensors);
            });
        }
    },
    computed: {

    },
    methods: {
        goBack() {
            const obj = { path: "/device/deviceInfo" };
            this.$tab.closeOpenPage(obj);
            console.log('back');
        },
        save() {
            var sensors = this.sensors;
            for (let i = 0; i < sensors.length; i++) {
                if(sensors[i].checked!=null&&sensors[i].checked.length>0){
                    sensors[i].variableKeys = sensors[i].checked.map(obj => obj.key).join(',');
                    sensors[i].variableNames = sensors[i].checked.map(obj => obj.value).join(',');
                    sensors[i].state = 1;
                }else{
                    sensors[i].variableKeys='';
                    sensors[i].variableNames='';
                    sensors[i].state = 0;
                }
            }
            updateDevice_sensorList(sensors).then(res => {
                this.$modal.msgSuccess("修改成功");
            })
        },
        switchChange(sensor) {
            if (sensor.state == 0) {
                sensor.checked = [];
            } else if (sensor.state == 1) {
                sensor.checked = sensor.options;
            }
        },
        checkedChange(sensor) {
            if (sensor.checked == null || sensor.checked.length == 0) {
                sensor.state = 0;
            } else {
                if (sensor.state == 0) sensor.state = 1;
            }
        }
    }
}
</script>

<style>
.switchStyle .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}

.el-switch__core {
    background-color: rgba(166, 166, 166, 1);
}

.switchStyle .el-switch__label--left {
    z-index: 9;
    left: 20px;
}

.switchStyle .el-switch__label--right {
    z-index: 9;
    left: 4px;
}

.switchStyle .el-switch__label.is-active {
    display: block;
}

.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: 75px !important;
}

.card {
    height: 250px;
    overflow-y: auto;
}

.card .el-card_header {
    padding-bottom: 10px;
}

.card .el-card__body {
    padding: 0px 10px 0 40px;
}
</style>